<template>
	<view>
		<view class="warp" v-if="flag">
			<view class="warp-view">
				<view class="warp-text">请登陆后再操作</view>
				<view class="warp-flex">
					<button plain="true" @click="close">取消</button>
					<button plain="true" open-type="getUserInfo" @click="confirm">登录</button>
				</view>
			</view>
		</view>
		<!-- 提示组件 -->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				flag: false
			}
		},
		methods:{
			changFlag(){
				this.flag=true
			},
			close(){
				this.flag=false
			},
			confirm(){
				this.$parent.handleLogin()
			}
		}
	}
</script>

<style scoped>
	/* 模态弹窗布局 */
	.warp {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
		z-index: 9999;
	}

	.warp-view {
		width: 500upx;
		height: 200upx;
		background: #FFFFFF;
		margin: auto;
		position: absolute;
		-webkit-position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		border-radius: 8upx;
		overflow: hidden;
	}

	.warp-text {
		text-align: center;
		margin-top: 30upx;
		font-size: 34upx;
		color: #666666;
	}

	.warp-flex {
		display: flex;
		justify-content: space-around;
		border-top: 1upx solid #EEEEEE;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 80upx;
		line-height: 80upx;
	}

	.warp-flex button {
		border: none;
		font-size: 30upx;
	}
</style>
